<template>
	<view class="loading">
		<text></text>
		<text></text>
		<text></text>
		<text></text>
		<text></text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.loading{
	            width: 100rpx;
	            height: 60rpx;
	            margin: 0 auto;
	            margin-top:100rpx;
	        }
	        .loading text{
	            display: inline-block;
	            width: 12rpx;
	            height: 100%;
	            border-radius: 4rpx;
	            background: rgba(86,157,255,0.6);
	            -webkit-animation: load 1s ease infinite;
	        }
	        @-webkit-keyframes load{
	            0%,100%{
	                height: 40rpx;
	                background: rgba(86,157,255,0.6);
	            }
	            50%{
	                height: 70rpx;
	                margin: -15rpx 0;
	                background: #0F77FE;
	            }
	        }
	        .loading text:nth-child(2){
	            -webkit-animation-delay:0.2s;
	        }
	        .loading text:nth-child(3){
	            -webkit-animation-delay:0.4s;
	        }
	        .loading text:nth-child(4){
	            -webkit-animation-delay:0.6s;
	        }
	        .loading text:nth-child(5){
	            -webkit-animation-delay:0.8s;
	        }
</style>
